/*
 * 授权成功信息展示页面
 * @Author: ljb
 * @Date: 2018-09-28 10:30:01
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-10-09 10:22:53
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
	.v-com-authorize-status{
		background: #F4F4F4;
		height: 100%;
		width: 100%;
		padding-top: 200px;
		.title{
			height:29px;
			font-size:22px;
			font-weight:400;
			line-height:29px;
			color:rgba(77,79,92,1);
			width: 800px;
			margin: 0 auto;
			&>small{
				font-size:22px;
				font-weight: lighter;
				margin-left: 22px;
			}
		}
		.dialog{
			width: 800px;
			margin-top: 20px;
			margin-left: auto;
			margin-right: auto;
		}

		.dialog.fail {
			.dialog__header{
				background: #FF8F8F;
			}
			.dialog__body__icon{
				padding-top: 30px;
			}
		}

		.dialog__header{
			height:60px;
			line-height: 60px;
			background:rgba(45,140,240,1);
			border-radius:5px 5px 0 0;
			font-size:18px;
			font-family:Microsoft YaHei, sans-serif;
			font-weight:400;
			color:#ffffff;
			text-align: center;
		}


		.dialog__body{
			padding: 60px 0 57px;
			background: #ffffff;
			border-radius: 0 0 5px 5px;
			text-align: center;
		}

		.dialog__body__icon{
			width: 110px;
			height: 124px;
			margin:0 auto;
			&>image{
				width: 100%;
				vertical-align: middle;
			}
		}

		.dialog__body__button{
			line-height: 36px;
			display: inline-block;
			margin: 0 auto;
			height:36px;
			background:rgba(45,140,240,1);
			border-radius:4px;
			padding: 0 22px;
			color: #ffffff;
		}

		.dialog__body__text{
			margin: 20px auto 30px;
			height:24px;
			font-size:18px;
			font-family:Microsoft YaHei, sans-serif;
			line-height:24px;
			color:rgba(77,79,92,0.50);
			text-align: center;
		}

		.copyright{
			height:19px;
			font-size:14px;
			font-family:Microsoft YaHei, sans-serif;
			font-weight:400;
			line-height:19px;
			color:rgba(158,167,180,1);
			margin: 30px auto;
			text-align: center;
		}
	}
</style>
<template>
	<div class="v-com-authorize-status">
		<h4 class="title">
			{{ customer_id? $t('authorize.mirror_customer'): $t('authorize.mirror_store') }}
			<small>{{ $t('authorize.youzan_authorization') }}</small>
		</h4>
		<div
			:class="{'fail':!is_success }"
			class="dialog">
			<div
				class="dialog__header">
				{{ is_success? $t('authorize.authorize_success'): $t('authorize.authorize_fail') }}
			</div>

			<div class="dialog__body">
				<div class="dialog__body__icon">
					<img
						:src="getIcon"
						alt="">
				</div>
				<div class="dialog__body__text">
					{{ is_success? $t('authorize.success_message'):$t('authorize.fail_message') }}
				</div>
				<a
					v-if="is_success"
					class="dialog__body__button"
					href="JavaScript:void(0);"
					@click="back">
					{{ $t('authorize.back') }}
				</a>
				<a
					v-else
					class="dialog__body__button"
					href="JavaScript:void(0);"
					@click="retry">
					{{ $t('authorize.retry') }}
				</a>
			</div>
		</div>

		<p class="copyright">
			2016-{{ date | year }} © Powerd by PanxSoft；{{ $t('authorize.tel') }}：020-82520103；QQ：3239966704
		</p>

	</div>
</template>

<script>
import { mapActions } from 'vuex';
import API_LIST from 'src/API_LIST';
import { parseQueryString } from 'src/utils/helper';

export default {
	name: 'AuthorizeSuccess',
	filters: {
		year(date) {
			return date.getFullYear();
		},
	},
	data() {
		return {
			success_icon: require('src/assets/img/shouquan_icon.svg'),
			fail_icon: require('src/assets/img/shouquanshibai_icon.svg'),
			customer_id: null,
			store_id: null,
			is_success: true,
			date: new Date(),
		};
	},
	computed: {
		getIcon() {
			return this.is_success ? this.success_icon : this.fail_icon;
		},
	},
	created() {
		this.init();
	},
	methods: {
		// action的引用
		...mapActions('userToken', ['toSetYouzanAuthorize']),

		/**
		 * 初始化页面数据
		 */
		init() {
			const query = parseQueryString();
			const has_result = !!query.auth_succeed;
			const has_user_type = parseInt(query.store_id, 10) || parseInt(query.customer_id, 10);
			if (has_result && has_user_type) {
				this.is_success = parseInt(query.auth_succeed, 10) === 1;
				this.customer_id = parseInt(query.customer_id, 10) || '';
				this.store_id = parseInt(query.store_id, 10) || '';

				if (this.is_success) { // 判断有赞授权
					this.toSetYouzanAuthorize(1);
				}
			} else {
				this.$Message.error('参数错误');
			}
		},

		/**
		 * 关闭页面
		 */
		back() {
			const is_store_type = !!this.store_id;

			let url = window.location.origin + window.location.pathname;

			if (is_store_type) {
				url += '#/store/youzan-authorize';
			} else {
				url += '#/customer/youzan-authorize';
			}

			window.location.href = url;
		},

		/**
		 * 重试
		 */
		retry() {
			const is_store_type = !!this.store_id;
			let api_url = '';
			if (is_store_type) {
				api_url = `${API_LIST.YOUZAN_AUTHORIZE}?store_id=${this.store_id}`;
			} else {
				api_url = `${API_LIST.YOUZAN_AUTHORIZE}?customer_id=${this.customer_id}`;
			}
			window.location.href = api_url;
		},

	},
};
</script>
